<template>
  <div>
    <el-container>
      <el-header class="header">
        <nav class="navbar" >
          <div class="logo">
            <img src="@/assets/LongLogo.png">
          </div>
          <div class="nav-links">
            <el-dropdown>
              <span @mousehover="activeItem=0" class="link1">预定管理</span>
              <template #dropdown>
                <el-dropdown-manu>
                  <el-dropdown-item>
                    <el-button type="text" @click="goOrder">机票预订</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-text>在线预订机票，快捷更高效</el-text>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text" @click="goOrder">航班动态</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-text>在线查询航班动态，获取最新航班信息</el-text>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text" @click="goOrder">附加服务</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-text>购买更多附加服务，官网更实惠</el-text>
                  </el-dropdown-item>
                </el-dropdown-manu>
              </template>
            </el-dropdown>
            <el-dropdown>
              <span @mousehover="activeItem=1" class="link2">出行帮助</span>
              <template #dropdown>
                <el-dropdown-manu>
                  <el-dropdown-item>
                    <el-text>购票服务</el-text>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text" @click="goHelp">销售网点</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text" @click="goHelp">机场柜台服务</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text" @click="goHelp">自助退票</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-text>出行准备</el-text>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text" @click="goHelp">特殊旅客服务</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text" @click="goHelp">防范诈骗温馨提醒</el-button>
                  </el-dropdown-item>
                </el-dropdown-manu>
              </template>
            </el-dropdown>
          </div>
          <div style="margin-right: 30px" v-if="token===''">
            <button @click="goToLogin" class="loginButton">登录</button>
            <text class="between">|</text>
            <button @click="goToRegister" class="registerButton">注册</button>
          </div>
          <div style="margin-right: 30px" v-else>
            <el-dropdown>
              <span @mousehover="activeItem=2">旅客{{ getUsername() }},你好</span>
              <template #dropdown>
                <el-dropdown-manu>
                  <el-dropdown-item>
                    <el-button type="text" @click="goUserMain">个人账户</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text" @click="goToLogin">退出登录</el-button>
                  </el-dropdown-item>
                </el-dropdown-manu>
              </template>
            </el-dropdown>
          </div>
        </nav>
      </el-header>
      <el-main class="main">
        <router-view/>
      </el-main>
      <el-footer class="footer">
        <p>&copy; 2024 厦门航空.</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "navHome",
  data() {
    return {
      username:  "",
      token: localStorage.getItem("token") || "",
      userInfo: null,
      activeItem: '',
    }
  },
  mounted() {
    if(localStorage.getItem("token")){
      axios.get("/info", {
        params: { token: this.token },
      })
          .then(response => {
            this.userInfo = response.data;
            if(this.userInfo.userType ==="admin"){
              localStorage.removeItem("token");
              location.reload();
            }
            else{this.username = this.userInfo.username;}
          })
          .catch(error => {
            console.error("Error fetching user info:", error);
          });
    }
  },
  methods: {
    getUsername() {
      return this.username;
    },
    goToLogin() {//清除token并跳转到登录界面
      console.log('跳转到登录界面');
      if(localStorage.getItem("token")){
        localStorage.removeItem("token");
      }
      this.$router.push('/Login');
    },
    goToRegister() {//跳转到注册界面
      console.log('跳转到注册界面');
      this.$router.push('/UserRegister');
    },
    goOrder() {
      this.$router.push('/Search');
    },
    goUserMain() {
      this.$router.push('/UserCenter');
    },
    goHelp() {
      this.$router.push('/help');
    },
  }
}
</script>

<style scoped>
.main{
  height: 75vh;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  color: white;
  padding: 10px 20px;
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  width: 100%;
  z-index: 1000;
}
.nav-links li {
  color: black;
  font-size: 14px;
  left: 0;
  margin-left: 80px;
  position: relative;
  cursor: pointer;
}
.logo img {
  height: 30px;
  margin-left: 300px;
}
.nav-links {
  list-style-type: none;
  display: flex;
  margin-left: 0;
  padding: 0;
  left: -100px;
  position: relative;
}
.link1 {
  margin-right: 100px;
}
.link2 {
  margin-right: 100px;
}
.link3 {
  margin-right: 100px;
}
.nav-links li:hover .dropdown {
  display: block;
}
.login-button button {
  background-color: transparent;
  color: #000000;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 200px;
}
.login-button button:hover {
  background-color: #ffffff;
}
.loginButton {
  background-color: transparent;
  color: #000000;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 20px;
  left: -230px;
  position: relative;
}
.between {
  left: -265px;
  position: relative;
  color: #000000;
  font-size: 15px;
}
.registerButton {
  background-color: transparent;
  color: #000000;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  left: -280px;
  position: relative;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
</style>